<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
<style>
body {
	margin: 40px;
}
.wrapper {
	display: grid;
	width: 600px;
	height: 600px;
	grid-gap: 20px;
	grid-template-columns: 50px 1fr 50px;
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-areas: "areaA areaA ....."
						 "areaB areaC areaC"
						 "areaB areaC areaC";
	background-color: #f00;
}
.box {
	background-color: #444;
	color: #fff;
}
.a {
	grid-area: areaA;
}
.b {
	grid-area: areaB;
}
.c {
	grid-area: areaC;
}
</style>

<script>
'use strict';

SimpleTest.waitForExplicitFinish();

function runTests() {
	var wrapper = document.getElementById("wrapper");
	var grid = wrapper.getGridFragments()[0];

	// test existence of property
	isnot(typeof(grid.areas), "undefined", "Grid.areas property exists.");

	if (typeof(grid.areas) != "undefined") {
		// test that the right number of areas are reported
		is(grid.areas.length, 3, "3 areas are reported.");

		if (grid.areas.length == 3) {
			// test area names
			is(grid.areas[0].name, "areaA", "Area 0 has proper name.");
			is(grid.areas[1].name, "areaB", "Area 1 has proper name.");
			is(grid.areas[2].name, "areaC", "Area 2 has proper name.");

			// test area types
			is(grid.areas[0].type, "explicit", "Area 0 is explicit.");
			is(grid.areas[1].type, "explicit", "Area 1 is explicit.");
			is(grid.areas[2].type, "explicit", "Area 2 is explicit.");

			// test numbers of start and end lines
			is(grid.areas[0].rowStart, 1, "Area 0 has start row line of 1.");
			is(grid.areas[0].rowEnd, 2, "Area 0 has end row line of 2.");
			is(grid.areas[0].columnStart, 1, "Area 0 has start column line of 1.");
			is(grid.areas[0].columnEnd, 3, "Area 0 has end column line of 3.");

			is(grid.areas[1].rowStart, 2, "Area 1 has start row line of 2.");
			is(grid.areas[1].rowEnd, 4, "Area 1 has end row line of 4.");
			is(grid.areas[1].columnStart, 1, "Area 1 has start column line of 1.");
			is(grid.areas[1].columnEnd, 2, "Area 1 has end column line of 2.");

			is(grid.areas[2].rowStart, 2, "Area 2 has start row line of 2.");
			is(grid.areas[2].rowEnd, 4, "Area 2 has end row line of 4.");
			is(grid.areas[2].columnStart, 2, "Area 2 has start column line of 2.");
			is(grid.areas[2].columnEnd, 4, "Area 2 has end column line of 4.");
			
			// test names of all the row lines
			isnot(grid.rows.lines[0].names.indexOf("areaA-start"), -1,
				"Grid row line 1 has the name 'areaA-start'."
			);
			
			isnot(grid.rows.lines[1].names.indexOf("areaA-end"), -1,
				"Grid row line 2 has the name 'areaA-end'."
			);
			isnot(grid.rows.lines[1].names.indexOf("areaB-start"), -1,
				"Grid row line 2 has the name 'areaB-start'."
			);
			isnot(grid.rows.lines[1].names.indexOf("areaC-start"), -1,
				"Grid row line 2 has the name 'areaC-start'."
			);
			
			is(grid.rows.lines[2].names.length, 0, "Grid row line 3 has no names.");
			
			isnot(grid.rows.lines[3].names.indexOf("areaB-end"), -1,
				"Grid row line 4 has the name 'areaB-end'."
			);
			isnot(grid.rows.lines[3].names.indexOf("areaC-end"), -1,
				"Grid row line 4 has the name 'areaC-end'."
			);
			
			// test names of all the column lines
			isnot(grid.cols.lines[0].names.indexOf("areaA-start"), -1,
				"Grid column line 1 has the name 'areaA-start'."
			);
			isnot(grid.cols.lines[0].names.indexOf("areaB-start"), -1,
				"Grid column line 1 has the name 'areaB-start'."
			);
			
			isnot(grid.cols.lines[1].names.indexOf("areaB-end"), -1,
				"Grid column line 2 has the name 'areaB-end'."
			);
			isnot(grid.cols.lines[1].names.indexOf("areaC-start"), -1,
				"Grid column line 2 has the name 'areaC-start'."
			);
			
			isnot(grid.cols.lines[2].names.indexOf("areaA-end"), -1,
				"Grid column line 3 has the name 'areaA-end'."
			);
			
			isnot(grid.cols.lines[3].names.indexOf("areaC-end"), -1,
				"Grid column line 4 has the name 'areaC-end'."
			);
		}
	}

	SimpleTest.finish();
}
</script>
</head>
<body onLoad="runTests();">

	<div id="wrapper" class="wrapper">
		<div id="boxA" class="box a">A</div>
		<div id="boxB" class="box b">B</div>
		<div id="boxC" class="box c">C</div>
	</div>

</body>
</html>
